<template>
  <!-- 组件根标签 -->
  <div class="xiangqingshare" ref="xqshare">
    <!-- <h5>分享数据的详情</h5> -->
    <hmnavbar @back="$router.back()"></hmnavbar>
    <!-- 1.标题 -->
    <h3 class="title">{{ detailObj.title }}</h3>
    <!-- 2.用户信息 -->
    <div class="info">
      <div class="pic" v-if="detailObj && detailObj.author">
        <img :src="baseURL + detailObj.author.avatar" alt="" />
      </div>
      <div class="msg" v-if="detailObj && detailObj.author">
        <div class="name">{{ detailObj.author.nickname }}</div>
        <div class="time">{{ detailObj.updated_at | relativeTime }}</div>
      </div>
    </div>
    <!-- 3.大图片 -->
    <!-- <div class="bigpic">
      <img
        src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1293433460,2561025067&fm=26&gp=0.jpg"
        alt=""
      />
    </div> -->
    <!-- 4. 信息数据-->
    <div class="datas" v-html="detailObj.content"></div>
    <!-- 5. 评论区-->
    <div class="pinglun">
      <h3>评论 <sup>87</sup></h3>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <commtent
          @imgclick="openReplayCommtent"
          :item="item"
          v-for="(item, index) in commtentsList"
          :key="index"
        ></commtent>
      </van-list>
    </div>
    <!-- 6.最底部的 -->
    <div class="footer">
      <div class="say" @click="showCommtent">
        我来补充几句
      </div>
      <div class="xingxing">
        <i
          @click="collectArt"
          class="iconfont iconbtn_shoucang_nor"
          :class="{
            active: getState(id, 'collectArticles')
          }"
        ></i>
        <div>{{ detailObj.collect }}</div>
      </div>
      <div class="zan">
        <i
          class="iconfont iconbtn_dianzan_small_nor"
          @click="starArt"
          :class="{
            active: getState(id, 'starArticles')
          }"
        ></i>
        <div>{{ detailObj.star }}</div>
      </div>
      <div class="fenxiang">
        <i class="iconfont iconbtn_share" @click="sharEerweima"></i>
        <div>{{ detailObj.share }}</div>
      </div>
    </div>

    <!-- 7.评论框弹出层popup -->
    <van-popup
      class="pop"
      v-model="isShowcommtent"
      position="bottom"
      :style="{ height: '25%' }"
    >
      <textarea
        class="input"
        :placeholder="placeholder"
        v-model="textareacontent"
      >
      </textarea>
      <div
        class="send"
        style="color:#ccc"
        v-if="textareacontent.trim().length === 0"
      >
        发送
      </div>
      <div class="send" style="color:red" v-else @click="sendCommtents">
        发送
      </div>
    </van-popup>

    <!-- 8.分享弹出层 -->
    <van-popup v-model="shareshow" class="sharepanel">
      <div class="top">
        长按图片下载并分享
      </div>
      <div class="box">
        <div class="img">
          <img :src="imgUrl" alt="" />
        </div>
        <div class="logo">
          <img src="./../../../assets/mianshi.png" alt="" />
        </div>
        <div class="ewm">
          <div id="qrcode" ref="qrcode"></div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
// import { getToken } from './../../../utils/token'

import {
  getSharedatabyID,
  getCommtents,
  sendCommtentsApi,
  collectAtrApi,
  starApi
} from './../../../api/article'
import commtent from '@/views/home/xiangqingshare/commtent'
// 导入自定截图的包
import html2canvas from 'html2canvas'
import QRCode from 'qrcodejs2'
export default {
  name: '',
  data () {
    return {
      // 基地址
      baseURL: process.env.VUE_APP_BaseURL,
      // 文章的id值
      id: '',
      // 面经详情的数据
      detailObj: '',

      // list列表的数据
      loading: false,
      finished: false,
      commtentsList: [], // 储存评论数据的数组
      limit: 5,
      start: -5,
      total: 0,

      // 弹出层popup
      isShowcommtent: false,
      // 评论输入框的内容
      textareacontent: '',
      // 输入框的提示
      placeholder: '',

      // 评论框还是回复框的状态,true为回复框
      isReplay: false,
      // 回复评论的那个人的数据信息
      currentCommtent: '',

      // 分享按钮弹出层
      shareshow: false,

      // 截屏图片
      imgUrl: ''
    }
  },
  methods: {
    ...mapActions(['setUserinfo']),
    ...mapMutations(['setIslogin']),
    // 分享二维码pop层
    sharEerweima () {
      this.shareshow = true
      // 将当前页面截图
      html2canvas(window.document.body, { useCORS: true }).then(canvas => {
        // canvas 就是截图的内容
        // 将截图转为 png 格式的（base64）字符串
        var img = canvas.toDataURL('image/png')
        // 保存图片内容
        this.imgUrl = img
      })

      // 生成二维码
      this.$nextTick(() => {
        this.$refs.qrcode.innerHTML = ''

        const qrode = new QRCode('qrcode', {
          width: 75, // 二维码的宽
          height: 75, // 二维码的高
          text: window.location.href // 二维码对应的链接
        })
        console.log(qrode)
      })
    },

    // 触发收藏事件
    async collectArt () {
      // 判断 user中是否存在数据
      if (!this.$login()) {
        return
      }

      this.$toast({
        type: 'loading',
        message: '加载中....',
        duration: 0
      })
      console.log('点收藏了')

      // 发送收藏或者取消收藏
      await collectAtrApi({
        id: this.id
      })
      // console.log(res)
      if (
        // 1.如果已经有了这个数据,说明已经收藏了
        this.user.collectArticles &&
        this.user.collectArticles.includes(+this.id)
      ) {
        // 这时提示取下收藏,数字减1
        this.$toast.success('取消收藏成功')
        this.detailObj.collect -= 1
      } else {
        // 2.否则就是没有数据,说明还没收藏
        this.$toast.success('收藏成功')
        this.detailObj.collect += 1
      }

      // 更新用户数据 -- 因为一刷新,用户的数据就不见了
      this.setUserinfo()
    },

    // 点赞事件
    async starArt () {
      // 判断 user中是否存在数据
      if (!this.$login()) {
        return
      }
      this.$toast({
        type: 'loading',
        message: '加载中....',
        duration: 0
      })

      // 点赞的接口
      await starApi({
        article: this.id
      })
      // console.log(res)
      if (
        // 1.如果已经有了这个数据,说明已经收藏了
        this.user.starArticles &&
        this.user.starArticles.includes(+this.id)
      ) {
        // 这时提示取下收藏,数字减1
        this.$toast.success('取消点赞')
        this.detailObj.star -= 1
      } else {
        // 2.否则就是没有数据,说明还没收藏
        this.$toast.success('点赞成功')
        this.detailObj.star += 1
      }

      // 更新用户数据 -- 因为一刷新,用户的数据就不见了
      this.setUserinfo()
    },

    // 1.弹出评论面板
    showCommtent () {
      this.isShowcommtent = true
      this.isReplay = false
      this.placeholder = '我也发言发言'
    },

    // 2.弹出回复面板
    openReplayCommtent (item) {
      this.isShowcommtent = true
      this.isReplay = true
      this.placeholder = '回复:' + item.author.nickname
      // 将当前评论的用户信息保存起来--用于以后使用
      this.currentCommtent = item
    },

    // 发送按钮
    async sendCommtents () {
      console.log('发送按钮被点击了')
      // 如果是回复面板
      if (this.isReplay) {
        this.$toast({
          type: 'loading',
          message: '正在发表...',
          duration: 0
        })

        const res = await sendCommtentsApi({
          content: this.textareacontent,
          article: this.id,
          parent: this.currentCommtent.id
        })
        console.log(res)
        this.currentCommtent.children_comments.push(res.data.data)

        this.isShowcommtent = false
        this.$toast.clear()
      } else {
        // 否则是发表评论面板
        this.$toast({
          type: 'loading',
          message: '正在发表...',
          duration: 0
        })
        // 1. 发送发表评论请求
        const res = await sendCommtentsApi({
          content: this.textareacontent,
          article: this.id
        })
        // 2. 接收数据
        console.log(res)
        const returnObj = res.data.data
        returnObj.star = 0

        // 3. 渲染页面
        this.commtentsList.unshift(returnObj)
        // 4. 关闭pop弹出层
        this.isShowcommtent = false
        this.$toast.clear()
      }
    },

    async onLoad () {
      this.start += this.limit
      const res = await getCommtents(this.id, this.limit, this.start)
      // console.log(res)
      this.commtentsList.push(...res.data.data.list)
      this.total = res.data.data.total

      this.loading = false
      if (this.commtentsList.length >= this.total) {
        this.finished = true
      }
    }
  },
  components: { commtent },
  async created () {
    // 获取到传到此页面的id
    this.id = this.$route.params.id
    console.log(this.id)
    // 发起获取面经数据的请求
    const res = await getSharedatabyID({
      id: this.id
    })
    console.log(res)
    this.detailObj = res.data.data
  },
  computed: {
    ...mapState(['user', 'isLogin']),
    ...mapGetters(['collectState', 'starState', 'getState'])
    // // 收藏的计算属性
    // collectState () {
    //   return (
    //     this.user.collectArticles &&
    //     this.user.collectArticles.includes(+this.id)
    //   )
    // }, // 点赞的计算属性
    // starState () {
    //   return this.user.starArticles && this.user.starArticles.includes(+this.id)
    // }
  }
}
</script>
<style lang="less" scoped>
.xiangqingshare {
  .title {
    padding: 15px;
    line-height: 30px;
    font-size: 20px;
  }
  .info {
    padding: 0 15px;
    display: flex;
    height: auto;
    background-color: transparent;
    .pic {
      overflow: hidden;
      img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
      }
    }
    .msg {
      margin-left: 10px;
      .name {
        height: 17px;
        opacity: 1;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        color: #545671;
        line-height: 17px;
        letter-spacing: 0px;
      }
      .time {
        height: 17px;
        opacity: 1;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #b4b4bd;
        line-height: 17px;
        letter-spacing: 0px;
      }
    }
  }
  .bigpic {
    text-align: center;
    margin-top: 15px;
    img {
      width: 345px;
      height: 194px;
      opacity: 1;
    }
  }
  .datas {
    line-height: 28px;
    font-size: 16px;

    padding: 15px;
    /deep/ img {
      width: 100%;
    }
  }
  .pinglun {
    padding: 15px;
    margin-bottom: 70px;
  }
  .footer {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0 15px;
    color: #b4b4bd;
    font-size: 12px;
    height: 60px;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #ffffff;

    .say {
      flex: 1;
      font-size: 14px;
      color: #b4b4bd;
      height: 34px;
      background: #f7f4f5;
      border-radius: 4px;
      padding: 10px;
    }
    .xingxing,
    .zan,
    .fenxiang {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0 15px;
      .iconfont {
        font-size: 25px;
      }
      .active {
        color: red;
      }
    }
    .zan {
    }
    .fenxiang {
    }
  }

  .pop {
    padding: 15px;
    .input {
      width: 100%;
      height: 99px;
      padding: 10px;
      font-size: 14px;
      color: #00b8d4;
      background: #f7f4f5;
      border-radius: 4px;
      border: none;
    }
    .send {
      margin-top: 10px;
      float: right;
      font-size: 16px;
      color: #b4b4bd;
    }
  }

  .sharepanel {
    width: 80%;
    background-color: #00b7d4;
    padding: 0 15px 15px;

    .top {
      color: whitesmoke;
      font-size: 12px;
      text-align: center;
      height: 40px;
      line-height: 40px;
      letter-spacing: 5px;
    }
    .box {
      background-color: whitesmoke;
      border-radius: 10px;
      overflow: hidden;
      .img {
        height: 400px;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .logo {
        margin: 20px 0;
        text-align: center;
        img {
          width: 120px;
          height: 36px;
        }
      }
      .ewm {
        margin-bottom: 10px;
        #qrcode {
          /deep/ img {
            margin: auto;
          }
        }
      }
    }
  }
}
</style>
